<template>
  <navigation></navigation>
  <div class="overall">
    <div class="content">

      <div class='content-img'>
        <img :src="userInfo.img" alt="头像" width="100px" height="100px" />
      </div>

      <div class='content-name'>
        <span class="name-left">昵称：</span><span class="name-right">{{ userInfo.username }}</span>
      </div>

      <hr>
      <div class="userInfo">
        <div class="sno">
          <span class="sno-left">学号：</span><span class="sno-right">{{ userInfo.sno }}</span>
        </div>
        <div class="info">
          <span class="sno-left">手机号：</span><span class="sno-right">{{ userInfo.telephone }}</span>
        </div>
        <div class="info">
          <span class="sno-left">邮箱：</span><span class="sno-right">{{ userInfo.email }}</span>
        </div>
        <div class="info">
          <span class="sno-left">年级：</span><span class="sno-right">{{ userInfo.grade }}</span>
        </div>
        <div class="info">
          <span class="sno-left">学院：</span><span class="sno-right">{{ userInfo.college }}</span>
        </div>
        <div class="info">
          <span class="sno-left">专业：</span><span class="sno-right">{{ userInfo.major }}</span>
        </div>
      </div>
      <div class="footer">
        <span class="button"><el-button type="info" plain round @click="modify">修改信息</el-button></span>
      </div>
    </div>
  </div>


   <el-dialog
    v-model="dialogVisible"
    title="修改信息"
    width="600"
    :before-close="handleClose"
  > 
      <div class="contentinfo">
        <div>
        <div>
          <span>手机号：</span><span></span>
        </div>
        
      </div>
      </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<script setup>
import axios from "axios";
import { ref } from "vue";

const userId = localStorage.getItem("token");
const userInfo = ref([]);
axios
  .get(`http://localhost:3000/TbUserinfoController/getUserinfoById/${userId}`)
  .then((res) => {
    console.log(res);
    userInfo.value = res.data.data;
  });

const dialogVisible = ref(false)

const modify = () =>{
dialogVisible.value = true
} 

</script>

<style scoped>
.overall {
  padding-top: 80px;
  width: 1200px;
  height: 600px;
  margin: auto;
  /* background-color: antiquewhite; */
}

.content {
  width: 1200px;
  /* background-color: azure; */
  height: 600px;
  box-shadow: 0px 0px 1px 0px #5d5454;
}

.content-name {
  padding-top: 10px;
  padding-left: 8px;
}

.name-left {
  font-size: larger;
  font-weight: 900;
}

.content-img {
  padding-left: 8px;
  padding-top: 8px;
}

.name-right {
  font-size: large;
}
.userInfo {
  padding-left: 8px;
}


.sno {
  padding-top: 5px;
}

.info{
  padding-top: 25px;
}

.sno-left {
  font-size: large;
}

.sno-right {
  padding-left: 5px;
  font-size: 18px;
  color:darkgrey
}

.footer {
  padding-top: 100px;
}

.button {
  padding-left: 500px;
}

.contentinfo {
  width: 400px;
}
</style>